<template>
  <div class="container">
    <div class="userbox">
      <div class="avatar">
        <img :src="user.headerurl ? baseApi + user.headerurl : baseApi + 'UserHeader\\20230214105739655.jpg'" alt="" />
      </div>
      <div class="name">
        {{ user.UserName }}
      </div>
      <div class="edit">
        <el-button color="var(--theme-color)" @click="toEdit"
          >编辑个人资料</el-button
        >
      </div>
      <div class="total">
        <div class="item">
          <div class="label">总浏览量</div>
          <div class="value">{{ user.ReadCount }}</div>
        </div>
        <div class="line">|</div>
        <div class="item">
          <div class="label">上传</div>
          <div class="value">{{ user.Pics }}</div>
        </div>
        <div class="line">|</div>
        <div class="item">
          <div class="label">排名</div>
          <div class="value">{{ user.Rank }}</div>
        </div>
      </div>
    </div>
    <div class="more">
      <div class="tabs">
        <div
          class="item"
          @click="changeTab(v, k)"
          :class="active == k ? 'active' : ''"
          v-for="(v, k) in tabs"
          :key="k"
        >
          {{ v.label }}
        </div>
      </div>
      <div class="content">
        <template v-if="active != 3">
          <WaterFall :data="home.list" @update="update" :showLike="active == 2" :columns="3" />
        </template>
        <template v-else>
          <div class="showbox">
            <div class="left">
              <div class="item" v-for="(v, k) in home.list" :key="k">
                <el-image
                  class="img"
                  fit="cover"
                  :src="baseApi + v.ThumbnailsFileUrl"
                  :preview-src-list="[baseApi + v.ThumbnailsFileUrl]"
                ></el-image>
              </div>
            </div>
            <div class="right">
              <div class="title">相册：{{ currentGroup }}</div>
              <div class="num">{{ home.picCount }}张</div>
              <div class="album">
                <div
                  class="album-item"
                  :class="
                    home.picParams.GroupID == v.GroupID ? 'album-active' : ''
                  "
                  v-for="(v, k) in home.albums"
                  @click="choseAlbum(v)"
                  :key="k"
                >
                  {{ v.GroupName }}
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
    <el-dialog v-model="showEdit" :modal="false" class="personDialog">
      <template #header>
        <div class="header">编辑个人资料</div>
      </template>
      <div class="edit-avatar">
        <img :src="user.headerurl ? baseApi + user.headerurl : baseApi + 'UserHeader\\20230214105739655.jpg'" alt="" />
        <el-upload
          action=""
          ref="upload"
          class="upload-demo"
          :limit="1"
          :file-list="uploadFileList.list"
          accept=".png,.jpg,.jpeg,.bmp"
          :show-file-list="false"
          :http-request="uploadFile"
        >
          <el-button color="#000">上传头像</el-button>
        </el-upload>
      </div>
      <el-form
        style="margin: 20px"
        :model="UserForm"
        ref="form"
        :rules="rules"
        label-position="top"
      >
        <el-form-item label="姓 名" prop="UserName">
          <el-input v-model="UserForm.UserName"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="11">
            <el-form-item label="手机号" prop="PhoneNumber">
              <el-input
                v-model="UserForm.PhoneNumber"
                maxlength="11"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12" :offset="1">
            <el-form-item label="Email" prop="Email">
              <el-input v-model="UserForm.Email"></el-input> </el-form-item
          ></el-col>
        </el-row>

        <el-form-item label="个人签名" prop="Signature">
          <el-input v-model="UserForm.Signature" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div class="btns">
        <el-button color="#000" @click="submit(form)">保存</el-button>
        <el-button type="danger" @click="showEdit = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import {
  toRefs,
  reactive,
  onMounted,
  ref,
  watch,
  nextTick,
  onActivated,
  inject,
  computed,
} from "vue";
import * as HomeApi from "@/api/home";
import { useRouter } from "vue-router";

import * as UserApi from "@/api/user";

import * as AlbumApi from "@/api/album";
import * as LoginApi from "@/api/login";
import { ElNotification } from "element-plus";
import { storeUser } from "@/store/user";
import * as CollectApi from "@/api/collect";
import WaterFall from "@/components/waterfell-horizontal.vue";
import Avatar from '@/assets/pics/avatar.png'
// import bus from "@/utils/bus";
export default {
  components: {
    WaterFall,
  },
  name: "",
  setup() {
    const router = useRouter();
    const user = storeUser();
    const active = ref(0);
    const showEdit = ref(false);
    const toEdit = () => {
      showEdit.value = true;
    };
    const home = reactive({
      list: [],
      picParams: {
        pageIndex: 1,
        pageSize: 999,
        GroupID: 0,
        CurrentUserAccount: user.UserAccount,
      },
      albums: [],
      picCount: 0,
    });
    const uploadFile = async (v) => {
      let { data: res } = await UserApi.saveAvatar(
        {
          UserId: user.UserId,
        },
        [v.file]
      );
      if (res.Status != 0) {
        ElNotification({
          type: "error",
          title: "上传失败",
          message: "图片格式错误！，请转换格式后重试",
        });
        return;
      }
      uploadFileList.list = [];
      let token = localStorage.getItem("token");
      if (token) {
        let { data } = await LoginApi.getUserInfo({ UserToken: token });
        if (data.Status == 0) {
          user.setUser(data.UserData);
        }
      }
    };
    const update = () => {
      init(active.value);
    };
    const uploadFileList = reactive({ list: [] });
    const UserForm = reactive({
      Signature: user.Signature,
      UserName: user.UserName,
      PhoneNumber: user.PhoneNumber,
      Email: user.Email,
    });
    const rules = {
      UserName: [
        { required: true, message: "用户名不能为空！", trigger: "blur" },
      ],
      Email: [{ required: true, message: "Email不能为空！", trigger: "blur" }],
      PhoneNumber: [
        { required: true, message: "手机号码不能为空！", trigger: "blur" },
      ],
    };
    const form = ref("");
    const tabs = ref([
      { value: 1, label: "收藏" },
      { value: 2, label: "点赞" },
      { value: 3, label: "获赞" },
      { value: 4, label: "我的上传" },
    ]);
    const submit = (formEl) => {
      if (!formEl) return;
      formEl.validate(async (v) => {
        if (v) {
          let { data } = await UserApi.save({
            UserId: user.UserId,
            UserName: UserForm.UserName,
            PhoneNumber: UserForm.PhoneNumber,
            Email: UserForm.Email,
            Signature: UserForm.Signature || "没 有 自 我 介 绍 呢",
          });
          if (data.Status == 0) {
            ElNotification({
              type: "success",
              title: "修改成功",
              message: "修改成功！",
            });
            let token = await localStorage.getItem("token");
            let { data: res } = await LoginApi.getUserInfo({
              UserToken: token,
            });
            if (res.Status == 0) {
              user.setUser(res.UserData);
            }
            showEdit.value = false
          } else {
            ElNotification({
              type: "error",
              title: "修改失败",
              message: "修改失败！",
            });
          }
        }
      });
    };
    const changeTab = (v, k) => {
      active.value = k;
    };
    const getCollect = async () => {
      let { data } = await CollectApi.getList({
        CurrentUserAccount: user.UserAccount,
        PageIndex: 1,
        PageSize: 999,
      });
      home.list = data.UserData.PicList;
    };
    const getDZList = async () => {
      let { data } = await CollectApi.getLikeList({
        CurrentUserAccount: user.UserAccount,
        PageIndex: 1,
        PageSize: 999,
      });
      home.list = data.UserData.PicList;
    };
    const getHZList = async () => {
      let { data } = await CollectApi.getLikes({
        CurrentUserAccount:user.UserAccount,
        PageSize:999,
        PageIndex:1
      });
      home.list = data.UserData.PicList;
    };
    const getMyUpload = async () => {
      let { data } = await AlbumApi.getList({
        UserAccount: user.UserAccount,
        PageSize: 999,
        PageIndex: 1,
      });
      home.albums = data.UserData.list;
      home.picParams.GroupID = home.albums[0].GroupID;
      getPics();
      // home.list = data.UserData.list;
    };
    const currentGroup = computed(() => {
      let i = home.albums.findIndex((v) => v.GroupID == home.picParams.GroupID);
      if (i > -1) {
        return home.albums[i].GroupName;
      }
      return "";
    });
    const init = (v) => {
      switch (v) {
        case 0:
          // 收藏
          getCollect();
          break;
        case 1:
          // 点赞
          getDZList();
          break;
        case 2:
          // 获赞
          // ElNotification({
          //   type: "error",
          //   title: "暂无",
          //   message: "功能开发种",
          // });
          getHZList();
          break;
        case 3:
          // 我的上传
          // ElNotification({
          //   type: "error",
          //   title: "暂无",
          //   message: "功能开发种",
          // });
          getMyUpload();
          break;
        default:
          break;
      }
    };
    watch(
      active,
      async (v) => {
        init(v);
      },
      { immediate: true }
    );
    const getPics = async () => {
      let { data: res } = await AlbumApi.getPics(home.picParams);
      home.picCount = res.UserData.PictureCount;
      home.list = res.UserData.PictureList;
    };
    const choseAlbum = (v) => {
      home.picParams.GroupID = v.GroupID;
      getPics();
    };
    return {
      user,
      UserForm,
      form,
      rules,
      submit,
      toEdit,
      update,
      showEdit,
      uploadFileList,
      home,
      uploadFile,
      active,
      tabs,
      Avatar,
      changeTab,
      choseAlbum,
      currentGroup,
    };
  },
};
</script>
<style scoped lang="scss">
::v-deep(.el-input__wrapper) {
  border-radius: 20px;
  padding: 8px 16px;
}
::v-deep(.el-textarea__inner) {
  border-radius: 20px;
  padding: 8px 16px;
}
.container {
  width: 74%;
  margin: 0 auto;
}
.userbox {
  text-align: center;
  > div {
    margin: 10px auto;
  }
  .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    text-align: center;
    img {
      width: 100%;
      object-fit: cover;
    }
  }
  .name {
    font-size: 56px;
    font-weight: 300;
  }
  .total {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    .item {
      padding: 0px 24px;
      font-size: 18px;
      &:last-child {
        border: 0;
      }
    }
    .line {
      align-self: center;
      color: #ccc;
    }
  }
}
.header {
  text-align: center;
  font-size: 32px;
  font-weight: 600;
}
.edit-avatar {
  display: flex;
  align-items: center;
  overflow: hidden;
  img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 20px;
  }
}
.btns {
  text-align: center;
}
.more {
  margin-top: 40px;
  .tabs {
    display: flex;
    .item {
      margin-right: 20px;
      color: #000;
      padding: 8px 16px;
      cursor: pointer;
    }
    .active {
      color: #fff;
      background: #000;
      border-radius: 5px;
    }
  }
  .content {
    margin-top: 20px;
  }
}
.showbox {
  display: flex;
  padding: 20px;
  border-radius: 20px;
  background: #e6e6e6;
  .left {
    width: 60%;
    margin-right: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
      width: 30%;
      margin-bottom: 20px;
      .img {
        width: 100%;
        border-radius: 20px;
      }
    }
    &::after {
      content: "";
      margin-bottom: 20px;
      width: 30%;
    }
  }
  .right {
    flex: 1;
    position: relative;
    .num {
      position: absolute;
      top: 12px;
      right: 20px;
      font-size: 20px;
    }
    .title {
      font-size: 30px;
    }
    .album {
      display: flex;
      flex-wrap: wrap;
      margin-top: 20px;
      justify-content: space-between;
      .album-item {
        width: 18%;
        cursor: pointer;
        margin-bottom: 10px;
        padding: 4px 8px;
      }
      .album-active {
        color: #fff;
        background: var(--theme-color);
        border-radius: 5px;
        text-align: center;
      }
      &::after {
        content: "";
        margin-bottom: 20px;
        width: 18%;
      }
    }
  }
}
</style>
